<extend name="Index/index_new" />
<block name="css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/experience.css">

<!-- 编辑器 -->
<link type="text/css" href="__PUBLIC__/Aero.css" rel="stylesheet">
<!-- /编辑器 -->
</block>
<block name="head_nav">

</block>

<block name="main">
<div id="largest">
    <div id="warning_box">
        <div id="warning_content">
            4567
        </div>
        <div id="warning_foot">
            <button id="warning_button" class="pull-right btn">确认</button>
        </div>
    </div>
</div>

<form id="experience_form" method="post" name="experience" enctype="multipart/form-data" action="<{:U('Experience/experience')}>" onsubmit=" return fun()" >
    <div class="nav_name">
        <span>经验发布：</span>
    </div>
    <div id="publish_title">
        <div id="editor">
            <div class="box">
                <b class="font_style">标题：</b>
                <input type="text" name="title" placeholder="给你的经验取个帅气的标题吧" maxlength="22">
                <br>
                <b class="font_style">分类：</b><select id="one" name="category1">
                            </select>
                            <select id="two" name="category2">
                            </select>
                            <select id="three" name="category3">
                            </select>
                            <select id="four" name="category4">
                            </select>
                
            </div>
            
        </div>
    </div>
    <div id="publish_main">
            <div id="main_content">
                <b class="font_style">简介：</b><br><br>
                <textarea cols="80" rows="5" id="intro" maxlength="200" placeholder="请输入200字以内的简介" name="intro"></textarea>
                <div class="mt30">
                    <input type="file" name="photo" />
                </div>
            </div>
            <div class="publish_main2" >
                
                    <b class="font_style">工具：</b><input type="text" name="tool" placeholder="没有工具可以不用写哦~">
                    <br>
                    <b class="font_style">原料：</b><input type="text" name="raw" placeholder="没有原料也可以不用写哦~">
            </div>
            <br>
            <div class="function">
                <b class="font_style">方法：</b>
                <br>
                <div class="buzhou">
                    <!-- 加载编辑器的容器 -->
                    <script id="container" name="content" type="text/plain">
                    </script>
                </div>
                <div class="add_fun">
                    <button class=" btn-primary " style="color:#fff;"id="button">发布 </button>   

                </div>

            </div>

    </div><!-- /publish_main -->
</form>

</block>
<block name="nav_jq">

<script type="text/javascript">

    //获取分类的数据
    $.ajax({
        type:'get',
        url:'<{:U('Experience/category')}>',
        async:false,
        success:function(data){
            //将父类信息 追加到 下拉框中
            //先清空原先的数据
            $('#one').empty();
            //遍历父类数据
            $('<option value= -1>请选择</option>').appendTo('#one');
            for (var i = 0; i < data.length; i++) {
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#one');
            };
        },
        dataType:'json',
    })

    //绑定事件
    $('#one,#two').change(function(){
        var pid = $(this).val();
        //清空之前的所有数据
        $(this).nextAll('select').empty();
        //保留 $(this) 的值
        var _this = $(this);

        //请求下一级的数据
        $.ajax({
            type:'get',
            url:'__ROOT__/index.php/Home/Experience/category',
            data:"pid="+pid,
            success:function(data){
                //如果下一级没有数据,就隐藏后面的下拉框
                if (data == 0) {
                    _this.nextAll('select').hide();
                    return;
                }else{
                    _this.next('select').show();
                }

                // console.log(_this);
                // 填充下一级的数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }
                //自动触发 后面的select 的change事件
                _this.next('select').trigger('change');
            },
            dataType:'json',
        })
    })

    //自动触发 #one 的change
    $('#one').trigger('change');
</script>

<!-- 编辑器 -->
<!-- 配置文件 -->
<script type="text/javascript" src="__PUBLIC__/editor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__PUBLIC__/editor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container',{
        toolbars: [
            ['fullscreen', 'source', 'undo', 'redo', 'bold','fontsize','bold', 'italic', 'underline', 'fontborder', 'strikethrough','emotion','simpleupload','insertimage','scrawl'],
            [ 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc','map']
        ]
    });
</script>
<script>
    function fun(){
        var title = document.experience.title.value;
        var intro = document.experience.intro.value;
        var photo = document.experience.photo.value;
        var category1 = document.experience.category1.value;
        $('#warning_button').click(function(){
            $('#largest').css('display','none');
        });
        if (title == '') {
            $('#largest').css('display','block');
            $('#warning_content').text('！标题不能为空');
            return false;
        };
        if (category1 == '-1') {
            $('#largest').css('display','block');
            $('#warning_content').text('！请选择分类');
            return false;
        };
        if (intro == '') {
            $('#largest').css('display','block');
            $('#warning_content').text('！请填写简介');
            return false;
        };
        if (photo == '') {
            $('#largest').css('display','block');
            $('#warning_content').text('！请上传图片');
            return false;
        };

        // return false;
        
    }
</script>
</block>